<template>
  <view class="content">
    <view class="pop-title">添加/修改同住人</view>
    <button class="add-btn" @click="addHandel">+添加入住人</button>
    <view class="">
      <view>
        <view class="flex justify-between align-center item-box" v-for="(item,index) in list" :key="index">
          <view class="flex align-center" @click="handleSelect(index,item)">
            <image v-if="item.select&&item.personId!=lesseeId" class="select-img"
                   @click="selectHandel(index,item.select)"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/select_.png"
                   mode=""></image>
            <image v-if="!item.select&&item.personId!=lesseeId" class="select-img"
                   @click="selectHandel(index,item.select)"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/select_no.png"
                   mode=""></image>
            <image v-if="item.personId==lesseeId" class="select-img"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/disable.png"
                   mode=""></image>
            <view>
              <view class="flex">
                <text class="name">{{ item.personName }}</text>
                <view class="default" v-if="item.defaultState=='0'">默认</view>
              </view>
              <view class="tip-text">联系手机：{{ item.personPhone }}</view>
              <view class="tip-text">身份证号：{{ item.idCard }}</view>
            </view>
          </view>
          <view class="edit" @click="putHandel(item)">
            修改
          </view>
        </view>
      </view>
    </view>
    <button class="bottom-btn" @click="submit">确定</button>
    <u-popup :show="show" @close="close" @open="open" mode="bottom" round="20" :closeable="true"
             :closeOnClickOverlay="true">
      <view class="addman-box">
        <view class="pop-title">添加入住人</view>
        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80" :labelStyle="labelStyle">
          <u-form-item label="住客姓名" prop="userInfo.name" borderBottom>
            <u--input v-model="form.personName" border="none"></u--input>
          </u-form-item>
          <u-form-item label="身份证号" prop="userInfo.name" borderBottom>
            <u--input v-model="form.idCard" border="none"></u--input>
          </u-form-item>
          <u-form-item label="联系手机" prop="userInfo.name" borderBottom>
            <u--input v-model="form.personPhone" border="none"></u--input>
          </u-form-item>
          <u-form-item label="设为默认" prop="userInfo.name" borderBottom>
            <u-switch v-model="form.defaultState" :size="15" inactiveValue="1" activeValue="0" activeColor="#19B84E"
                      @change="change"></u-switch>
          </u-form-item>
        </u--form>
        <view class="agreement">
          <view class="flex align-center title">
            <image class="safety-img"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/safety.png"
                   mode="widthFix"></image>
            隐私保护
          </view>
          <ul>
            <li>根据国家相关法律法规，入住经营性质的酒店、民宿，必须提供入住者的身份信息。</li>
            <li>您的身份信息平台会严格保密，仅用于必要的身份核实。</li>
            <li>上述手机号码仅在房东提供入住与相关服务时使用。</li>
          </ul>
        </view>
        <button class="save-btn" @click="savePerson">保存</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import form from '../../uni_modules/uview-ui/libs/config/props/form';
import modal from '../../uni_modules/uview-ui/libs/config/props/modal';
import {
  personList,
  addPerson,
  putPerson
} from '@/api/home';

const getSex = (no = '') => {
  if (!no) return no
  const toStr = no.toString()
  if (toStr.length < 17) return no
  return Number(toStr.substring(16, 17)) % 2 ? '1' : '2' //1男 2女
}
export default {
  data() {
    return {
      labelStyle: {
        "font-weight": 500,
        "font-size": "30rpx",
        color: "#666666"
      },
      selectIndex: 0,
      show: false,
      form: {
        "personName": "", //入住人姓名
        "personPhone": "", //入住人手机号码
        "idCard": "", //入住人身份证号码
        "sex": "", //性别：1男 2女
        "defaultState": "1" //是否默认（0默认,1非默认）
      },
      rules: [],
      list: []
    }

  },
  props: {
    type: {
      type: String,
      default: 'lessee'//lessee承租，roommate同住人
    },
    length: {
      type: Number,
      default: 0
    },
    lesseeId: {
      type: String,
      default: ''
    }
  },
  created() {
    this.getList();
  },
  methods: {
    selectHandel(index, state) {
      if (this.type == 'lessee') {
        this.list.map(item => {
          item.select = false;
        })
        this.list[index].select = true;
      } else {
        this.list[index].select = !state;
      }

    },
    handleSelect(index, data) {
      if (data.personId == this.lesseeId) return

        if (this.type == 'lessee') {
          this.list.map(item => {
            item.select = false;
          })
          this.list[index].select = true;
        } else {
          this.list[index].select = !data.state;
        }

    },
    getList() {
      personList().then(res => {
        let list = res.data;
        list.map(item => {
          item.select = false
        })
        this.list = list;
      })
    },
    addHandel() {
      this.form = this.$options.data().form;
      this.show = true;
    },
    savePerson() {
      if (this.form.personId) {
        this.putPerson()
      } else {
        this.addPerson()
      }
    },
    putHandel(row) {
      this.form = row;
      this.show = true;
    },
    addPerson() {
      this.form.sex = getSex(this.form.idCard)
      addPerson(this.form).then(res => {
        this.show = false;
        this.getList();
        uni.showToast({
          title: "新增成功"
        })

      })
    },
    putPerson() {
      this.form.sex = getSex(this.form.idCard)
      putPerson(this.form).then(res => {
        this.show = false;
        this.getList();
        uni.showToast({
          title: "编辑成功"
        })
      })
    },
    close() {
      this.show = false;
    },
    open() {

    },
    submit() {
      let result = this.list.filter(item => item.select === true)
      if (result.length < this.length) {
        uni.showToast({
          title: '已次添加人数大于可入住人数',
          icon: 'none'
        })
        return
      }
      this.$emit('submit', result)
    }
  }
}
</script>

<style lang="scss">
.content {
  background-color: #fff;
  width: 750rpx;
  height: 1134rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0rpx 0rpx;

}

.pop-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  font-size: 34rpx;
  color: #000000;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 40rpx 0 46rpx 0;
}

.item-box {
  width: 672rpx;
  margin-left: 38rpx;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  padding-bottom: 36rpx;
  margin-bottom: 28rpx;

  .select-img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 36rpx;
  }

  .edit {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 22rpx;
    color: #4967D6;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #111111;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 16rpx;
  }

  .default {
    width: 76rpx;
    height: 36rpx;
    background: #EEEEEE;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    line-height: 36rpx;
    color: #111111;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.tip-text {
  line-height: 34rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #666666;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 690rpx;
  height: 88rpx;
  background: #FF7947;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #FFFFFF;
  line-height: 88rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-left: 30rpx;
  margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
  margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
}

.add-btn {
  width: 690rpx;
  height: 94rpx;
  background: rgba(255, 121, 71, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  font-size: 30rpx;
  color: #FF7947;
  line-height: 94rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 52rpx;
}

.addman-box {
  width: 750rpx;
  //height: 906rpx;
  min-height: 906rpx;
  max-height: 100vh;
  padding: 20rpx 30rpx;

}

.save-btn {
  width: 690rpx;
  height: 88rpx;
  background: #FF7947;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #FFFFFF;
  line-height: 88rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.agreement {
  width: 690rpx;
  height: 252rpx;
  background: #F7F8FA;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 28rpx 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 22rpx;
  color: #9B9B9B;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 42rpx;
  margin-bottom: 70rpx;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #111111;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 16rpx;
  }

  .safety-img {
    width: 20rpx;
    height: 22rpx;
    margin-right: 6rpx;
  }
}

</style>
